<template>
  <div id="woDe">
    <!-- 头部 -->
    <header>
      <a href="">
        <span class="jian"></span>
      </a>
      <span>用户中心</span>
    </header>
    <!-- 图标 -->
    <div class="tu">
      <a href=""><i class="iconfont icon-shezhi"></i></a>
      <div>
        <a href=""><i class="iconfont icon-saoma"></i></a>
        <a href=""><i class="iconfont icon-msg"></i></a>
      </div>
    </div>
    <!-- 头像 -->
    <nav>
      <!-- 图片 -->
      <div class="tu1"></div>
      <!-- 文字 -->
      <div class="wen">
        <router-link to="" @click.native="reg1">
          <p class="title">
            {{ username }}
          </p>
        </router-link>
        <p class="pu">普通会员</p>
      </div>
      <span v-show="xian" class="tui" @click="close">退出登入</span>
      <div style="clear: both"></div>

      <!-- 评价 -->
      <div class="pin">
        <div>
          <p>0</p>
          <p>评价</p>
        </div>
        <div>
          <p>0</p>
          <p>关注</p>
        </div>
        <div>
          <p>0</p>
          <p>足迹</p>
        </div>
      </div>
    </nav>
    <div class="tishi" v-show="xian1">
      <span>{{ deng }}</span>
    </div>
    <!-- 想看 -->
    <section>
      <!-- 想看 -->
      <div class="xiang">
        <div>
          <a href="">
            <span class="iconfont icon-aixin_shixin quan"></span>
            <span class="kan">关注店铺</span>
          </a>
        </div>
        <div>
          <a href="">
            <span class="iconfont icon-wujiaoxing quan1"></span>
            <span class="kan">收藏夹</span>
          </a>
        </div>
      </div>
    </section>
    <!-- 优惠劵 -->
    <main>
      <div>
        <a href="">
          <p class="iconfont icon-youhuiquan you"></p>
          <p class="jian1">优惠劵</p>
        </a>
      </div>
      <div>
        <a href="">
          <p class="iconfont icon-hongbao you kou"></p>
          <p class="jian1">口令红包</p>
        </a>
      </div>
      <div>
        <a href="">
          <p class="iconfont icon-lipinka you ka"></p>
          <p class="jian1">礼品卡</p>
        </a>
      </div>
      <div>
        <a href="">
          <p class="iconfont icon-qiandai you fu"></p>
          <p class="jian1">星币</p>
        </a>
      </div>
      <div>
        <a href="">
          <p class="iconfont icon-keyongyue you yu"></p>
          <p class="jian1">余额</p>
        </a>
      </div>
    </main>
    <!-- 福利商城 -->
    <div class="fu">
      <a href="">
        <div class="shi">
          <span class="iconfont icon-gouwudai fuli"></span>
          <span class="li">星币商城</span>
        </div>
      </a>
      <router-link to="/harvest">
        <div class="shi">
          <span class="iconfont icon-dingdan- fuli"></span>
          <span class="li">我的订单</span>
        </div>
      </router-link>
      <a href="">
        <div class="shi">
          <span class="iconfont icon-huiyuan fuli"> </span>
          <span class="li">会员中心</span>
        </div>
      </a>
      <a href="">
        <div class="shi">
          <span class="iconfont icon-kefu fuli"></span>
          <span class="li">客服反馈</span>
        </div>
      </a>
      <a href="">
        <div class="shi">
          <span class="iconfont icon-guanyuwomen fuli"></span>
          <span class="li">关于我们</span>
        </div>
      </a>
    </div>

    <!-- 尾部 -->
    <!-- 底部信息 -->
    <footer>
      <div>
        <span>店铺信息</span>
        <div class="xian"></div>
      </div>
    </footer>

    <!-- 登录模块 -->
    <!-- 向上的图标 -->
    <div class="top_tu" v-show="top" @click="shang">
      <span></span>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      reg: {
        path: "/reg",
      },
      top: false, //置顶的图标
      username: "登入", //用户名
      xian: false, //显示登入
      xian1: false, //提示显示
      deng: "退出成功", //
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    window.scrollTo(0, 0);

    // console.log(localStorage.getItem("username"));
    if (localStorage.getItem("username") != null) {
      this.username = localStorage.getItem("username");
      this.xian = true;
    } else {
      this.username = "登入";
    }
  },
  methods: {
    reg1() {
      var username = localStorage.getItem("username");
      if (username == null) {
        this.$router.push({ path: "/reg" });
      }
    },
    //  管理显示隐藏
    handleScroll() {
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          window.pageYOffset
      );
      // 向上的图标显示
      if (top > 50) {
        this.top = true;
      } else {
        this.top = false;
      }
    },
    shang() {
      // 置顶
      $("html").animate(
        {
          scrollTop: 0,
        },
        100,
        "linear"
      );
    },
    // 退出登入
    close() {
      this.xian = false;
      this.username = "登入";

      // 提示内容
      this.xian1 = true;
      setTimeout(() => {
        this.xian1 = false;
      }, 500);

      // 将数据出入数据库中
      // 将一个 JSON 字符串转换为对象
      var p = JSON.parse(localStorage.getItem("shop"));
      var ding = JSON.parse(localStorage.getItem("ding"));
      // console.log(p); //object
      var username = localStorage.getItem("username");
      // console.log(username);
      // 存入数据库
      // 获取数据
      var obj = { username: username, shop: p, id:2000,ding:ding };
      // console.log(obj);
      this.$axios
        .post("http://localhost:3000/serve", obj)
        .then((data) => {
          // console.log(data.data);
          /* if (data.data == 200) {
            console.log("传入成功");
          } else  {
            console.log("修改成功");
          } */
        })
        .catch((err) => {
          console.log(err);
        });

      // 后台清理数据
      //localStorage.clear();
      localStorage.removeItem("username");
      localStorage.removeItem("shop");
      localStorage.removeItem("ding");
      localStorage.removeItem("id");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
div {
  box-sizing: border-box;
}
#woDe {
  width: 100%;
  height: 350px;
  background: url("../../public/img/back.jpg") no-repeat;
  background-size: 100%;
  header {
    width: 100%;
    height: 1.332623rem;
    background-color: #fff;
    text-align: center;
    font-size: 0.479744rem;
    font-weight: 600;
    line-height: 1.332623rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  .jian {
    width: 0.399787rem;
    height: 0.399787rem;
    display: inline-block;
    border-top: 1px solid #565656;
    border-left: 1px solid #565656;
    transform: rotate(-45deg) translate(-88px, -87px);
  }
  // 图标
  .tu {
    margin: 50px 15px 0;
    // width: 100%;
    height: 50px;
    // border: 1px solid red;
    a {
      i {
        font-size: 24px;
        color: #fff;
        line-height: 50px;
      }
    }
    // 两个
    div {
      float: right;
      i {
        font-size: 20px;
        margin: 0 0 0 20px;
      }
    }
  }

  // 头像
  nav {
    margin: 0 30px;
    // height: 80px;
    // border: 1px solid;
    .tu1 {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      /* border: 1px solid; */
      background: url("../../public/img/tou.jpg") -13px no-repeat;
      background-size: 170%;
      float: left;
    }
    // 文字
    .wen {
      color: #fff;
      float: left;
      .title {
        margin: 5px 10px;
        font-size: 18px;
        color: #fff;
        // display: inline-block;
        // width: 160px;
      }
      .pu {
        font-size: 14px;
        margin: 10px;
      }
    }
    .tui {
      color: #fff;
      font-size: 14px;
      line-height: 36px;
    }
    // 评价

    .pin {
      margin-top: 15px;
      display: flex;
      justify-content: space-around;
      div {
        text-align: center;
        // border: 1px solid;
        color: #fff;
        p:nth-child(1) {
          font-size: 18px;
          font-weight: 500;
        }
        p:nth-child(2) {
          font-size: 13px;
          margin-top: 6px;
        }
      }
    }
  } //nav
  // 退出提示
  //想看
  section {
    height: 75px;
    // 想看
    .xiang {
      font-size: 16px;
      margin: 15px 0px 0px;
      // border: 1px solid;
      display: flex;
      justify-content: space-around;
      div {
        background-color: #fff;
        border-radius: 60px;
        padding: 9px 29px;
        box-shadow: 1px 2px 7px #dbd9d9;
        .quan {
          padding: 5px;
          border-radius: 50%;
          // border: 1px solid red;
          background-color: #fa618a;
          color: #ffd5e0;
        }

        .quan1 {
          padding: 5px;
          border-radius: 50%;
          // border: 1px solid red;
          background-color: #0091ff;
          color: #fff;
          font-size: 16px;
        }
        .kan {
          margin-left: 10px;
        }
      }
    }
  } //section
  // 优惠劵
  main {
    padding-bottom: 110px;
    background-color: #fff;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    div {
      text-align: center;
      .you {
        font-size: 25px;
        background: linear-gradient(to right, #fdd453, #fbbe3b);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
      }
      .kou {
        font-size: 35px;
        background: linear-gradient(to right, #ff7095, #ff5375);
      }
      .ka {
        font-size: 35px;
        background: linear-gradient(to right, #4de3ca, #3fd8c1);
      }
      .fu {
        font-size: 30px;
        background: linear-gradient(to right, #ffb372, #fe8e42);
        padding: 0;
      }
      .yu {
        font-size: 30px;
        background: linear-gradient(to right, #659ff5, #4297f3);
      }
      .jian1 {
        margin-top: 15px;
        font-size: 13px;
        font-weight: bolder;
      }
    }
  } //main

  // 福利商城
  .fu {
    padding: 0 15px;
    background-color: #fff;
    .shi {
      height: 50px;
      line-height: 20px;
      padding: 15px 0;
      span {
        font-size: 13px;
        font-weight: bolder;
      }
      .fuli {
        font-size: 20px;
        margin-right: 10px;
      }
      .li {
        display: inline-block;
        transform: translateY(-3px);
      }
      .li::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-top: 1px solid #b2b2b4;
        border-right: 1px solid #b2b2b4;
        transform: rotate(45deg) translate(169px, -169px);
      }
    }
  }

  /* 底部信息 */
  footer {
    width: 100%;
    height: 150px;
    margin-top: 1.332623rem;
    background-color: #efeff4;
    div {
      width: 80%;
      margin: auto;
      text-align: center;
      line-height: 2.665245rem;
      font-size: 16px;
      color: #b7b7b9;
      position: relative;
      span {
        display: inline-block;
        background-color: #efeff4;
        position: relative;
        z-index: 2;
        width: 85px;
      }
      .xian {
        width: 100%;
        border-top: 1px solid #d3d3d4;
        position: absolute;
        top: 50%;
        margin: auto;
      } //footer
    }
  }
  // 置顶图标
  .top_tu {
    width: 1.066098rem;
    height: 1.066098rem;
    border: 0.026652rem solid transparent;
    position: fixed;
    bottom: 70px;
    right: 15px;
    border-radius: 20px;
    background: rgba(151, 113, 37, 0.2);
    text-align: center;
    /* line-height: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-left: 2px solid #977125;
      border-top: 2px solid #977125;
      transform: rotate(45deg);
      margin-top: 6px;
    }
  }
  // 登入提示
  .tishi {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1111;
    span {
      width: 200px;
      height: 100px;
      background: rgba(255, 255, 255, 0.9);
      color: #000;
      display: inline-block;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      border-radius: 10px;
      transform: translate(50%, 280%);
    }
  }
}
</style>